<template>
    <div>

        <div class="title">
            <div class="desc" >科研学术奖励
                <el-checkbox v-model="checked" @change="changeChecked">无(专家无科研学术奖励，勾选该项;可完成专家新增)</el-checkbox> 
            </div>
            <div class="box-wrap">
                <div class="line-item">
                    <el-button type="primary" v-if="!checked" @click="handleAdd" :disabled="flag == 3">添加</el-button>
                </div>
            </div>
        </div>

        <el-table :data="membersList" class="table">
            <el-table-column label="名称"   width="150" >
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.projectName"
                        placeholder="名称"  maxlength="50" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.projectName }}</span>
                </template>
            </el-table-column>


            <el-table-column label="奖项"  width="150" >
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.awardName" placeholder="奖项" maxlength="20" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.awardName }}</span>
                </template>
            </el-table-column>


            <el-table-column label="等级"  width="150" >
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.level" placeholder="等级" maxlength="20" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.level }}</span>
                </template>
            </el-table-column>


            <el-table-column label="名次"  width="150" >
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.awardRank" placeholder="名次" maxlength="20" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.awardRank }}</span>
                </template>
            </el-table-column>

            <el-table-column label="年份"  width="150" >
                <template #default="scope">
                    <el-date-picker v-if="activeIndex == scope.$index" v-model="scope.row.year" type="year"
                        value-format="YYYY" placeholder="年份" clearable style="width: 100%" />
                    <span v-else>{{ scope.row.year }}</span>
                </template>
            </el-table-column>


            <el-table-column label="颁发单位"  width="150" >
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.awardOrgName"
                        placeholder="颁发单位"  maxlength="50" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.awardOrgName }}</span>
                </template>
            </el-table-column>

          <el-table-column label="获奖方式"  width="200" >
            <template #default="scope">
              <el-select v-if="activeIndex == scope.$index" v-model="scope.row.awardMethodId" clearable placeholder="请选择获奖方式"  @change="changeEducate($event, activeIndex)">
                <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
                           v-for="item in hjfsList"   />
              </el-select>
              <span v-else>{{ scope.row.awardMethod }}</span>
            </template>
          </el-table-column>

          <el-table-column align="right" width="250">
                <template #header>
                    <span>操作</span>
                </template>
                <template #default="scope">
                    <div v-if="activeIndex == scope.$index">

                        <el-button type="success" @click="handleSave">保存</el-button>
                      <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定"
                                     cancel-button-text="取消" icon-color="#e6a23c" title="你确定要删除当前行?">
                        <template #reference>
                          <el-button type="danger" :disabled="flag == 3">删除</el-button>
                        </template>
                      </el-popconfirm>
                    </div>
                    <div v-else>
                        <el-button type="primary" @click="handleEdit(scope.$index)" :disabled="flag == 3">编辑</el-button>
                        <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定"
                            cancel-button-text="取消" icon-color="#e6a23c" title="你确定要删除当前行?">
                            <template #reference>
                                <el-button type="danger" :disabled="flag == 3">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>



<script  lang="ts">

import { ref, watch } from 'vue';
import {tips} from "@/views/science/components/tips/tips";

export default {


    components: {

    },
    emits: {
        dataChange: null,
        paramsChange: null,
    },
    props: {
        members: {
            type: Array,
            required: true,
        },
      hjfsList: {
        type: Array,
        required: true,
      },
      // falg  1:新增  2:编辑  3:详情
      flag: {
        type: String,
        default: '1',
      },
      isChecked: {
        type: Number,
        default: 1,
      },
    },
    setup(props, { emit }) {
        
        const checked = ref(!props.isChecked)
        let activeIndex = ref(-1);


        const membersList = ref(props.members)

        watch(props, (newValue, oldValue) => {
            membersList.value = newValue.members
        });
        watch(()=>props.isChecked, () => {
          console.log(checked.value,!props.isChecked,'award-ddasfwef');
          checked.value = !props.isChecked
        },{
          immediate:true
        });

        const handleAdd = () => {

            let item = {
                projectName: '',
                awardName: '',
                level: '',
                awardRank: '',
                year: '',
                awardOrgName: '',
              awardMethodId: '',
              awardMethod: '',
            };

            let flag = true
            membersList.value.every(item=>{
              console.log(item,'item');
              for(let key in item){
                if(item[key]===''){
                  flag =  false
                  return false
                }
              }
              return true
            })
            if(!flag){
              tips("请填写完整数据", "warning");

              return
            }

            membersList.value.push(item);

            activeIndex.value = membersList.value.length - 1;

        }
      let  changeEducate=(id:any,currentRow:any)=>{

        let itemText = props.hjfsList.find((item:any) => item.itemValue == id).itemText;

        membersList.value[currentRow].awardMethodId=id

        membersList.value[currentRow].awardMethod=itemText

      }


      const handleEdit = (index: number) => {

            activeIndex.value = index;
        };

        const handleSave = () => {
          if( membersList.value.length < 1){
            // tips("科研学术奖励中需要至少一条数据", "warning");
            // // event.stopPropagation();
            // return false;
          }else {
            let panduan = 0 ;
            membersList.value.forEach(item => {
              for (let i = 0; i < membersList.value.length; i++) {
                console.log(323232,item)
                if(item.awardMethodId == null || item.awardMethodId == '') {
                  panduan = 1;
                }
              }
            });
            if(panduan == 1){
              tips("保存的一条数据中获奖方式不能为空", "warning");
              // event.stopPropagation();
              return false;
            }

          }


          activeIndex.value = -1;

            emit('paramsChange', {list: membersList.value, checked: checked.value})

        };

        const handleDelete = (index: number) => {
            membersList.value.splice(index, 1);

            emit('paramsChange', {list: membersList.value, checked: checked.value})
        };
        const changeChecked = ()=>{
            emit('paramsChange', {list: membersList.value, checked: checked.value})
        }
        return {
            changeChecked,
            checked,
            membersList,
            activeIndex,
            handleAdd,
            handleEdit,
            handleSave,
            handleDelete,
            changeEducate,
        }


    },
}
</script>












<style scoped lang="scss">
.box-wrap {
    display: flex;
    // .line-item:nth-child(1) {
    //     margin-right: 417px;
    //     font-size: 14px;
    //     align-items: center;
    //     display: flex;
    //     align-items: center;
    // }
}
.title {
    display: flex;
    justify-content: space-between;

    .desc {
        font-weight: bolder;
    }
}

.table {
    margin: 15px 0;
}
</style>
